<template>
  <view class="truck">
    <view class="truck-first">
      <!-- 车头测35度 -->
      <view class="truck-first-item">
        <view>
          <image 
            v-if="img1 == ''"
            class="truck-img"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_11.png"
            @click="chooseImg(5)"></image>
          <image
            v-else
            mode="aspectFill"
            class="truck-img"
            :src="img1"
            @click="showImg(img1)"
            ></image>
        </view>
        <view>
          <image 
            class="truck-img-title"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_26.png"></image>
        </view>
      </view>
      <!-- 整车铭牌 -->
      <view class="truck-first-item">
        <view>
          <image 
            v-if="img2 == ''"
            class="truck-img"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_5.png"
            @click="chooseImg(2)"></image>
          <image
            v-else
            mode="aspectFill"
            class="truck-img"
            :src="img2"
            @click="showImg(img2)"
            ></image>
        </view>
        <view>
          <image 
            class="truck-img-title"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_36.png"></image>
        </view>
      </view>
      <!-- 驾驶证正本 -->
      <view class="truck-first-item">
        <view>
          <image 
            v-if="img3 == ''"
            class="truck-img"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_7.png"
            @click="chooseImg(8)"></image>
          <image
            v-else
            mode="aspectFill"
            class="truck-img"
            :src="img3"
            @click="showImg(img3)"
            ></image>
        </view>
        <view>
          <image 
            class="truck-img-title"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_23.png"></image>
        </view>
      </view>
      <!-- 更多照片按钮 -->
      <view>
        <image 
          @click="showMoreImg"
          style="width: 70rpx;height: 190rpx;"
          src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_51.png"></image>
      </view>
    </view>
    <view class="truck-second">
      <view class="truck-second-item">
        <view>
          <image 
            style="width: 40rpx;height: 40rpx;float: left;margin: 3rpx 16rpx 0 0;" 
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_55.png"></image>
          <text>自编号：</text>
          <text>{{data.selfNumbering}}</text>
          <image
            v-if="data.status == 0"
            style="width: 154rpx;height: 40rpx;float: right;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_56.png"></image>
        </view>
      </view>
      <view class="truck-second-item">
        <view>
          <image 
            style="width: 40rpx;height: 40rpx;float: left;margin: 3rpx 16rpx 0 0;" 
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_55.png"></image>
          <text>车   型：</text>
          <text>{{data.vehicleType}}</text>
        </view>
      </view>
      <view class="truck-second-item-2">
        <text>实际使用单位：{{data.actualUser}}</text>
      </view>
      <view class="truck-second-item-2">
        <text>品牌型号：{{data.model}}</text>
      </view>
      <view class="truck-second-item-2">
        <text>车辆识别代码：{{data.vin}}</text>
      </view>
      <view class="truck-second-item-2">
        <text>年检日期：{{data.issueDate}}</text>
        <image
          @click="gotoBasicInfo"
          style="width: 134rpx;height: 34rpx;float: right;"
          src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_54.png"></image>
      </view>
    </view>
    <view class="truck-third">
      <view class="truck-third-title">
        功能
      </view>
      <view class="truck-third-main">
        <view style="display: flex;justify-content: space-between;">
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_37.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_38.png"></image>
          <image
            style="width: 100rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_39.png"></image>
          <image
            style="width: 74rpx;height: 94rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_40.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_41.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_42.png"></image>
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 50rpx;">
          <image
            style="width: 82rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_41.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_42.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_43.png"></image>
          <image
            style="width: 84rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_48.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_49.png"></image>
          <image
            style="width: 80rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_42.png"></image>
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 50rpx;">
          <image
            style="width: 100rpx;height: 96rpx;"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_39.png"></image>
          
        </view>
      </view>
    </view>
    <view class="truck-btn">
      报  修
    </view>
  </view>
</template>

<script>
  import {getCarInfo} from '@/api/truck'
  import {uploadImg} from '@/api/uploadFile'
  export default {
    data() {
      return {
        img1:'',
        img2:'',
        img3:'',
        imgs:[],
        data:{},
        showImgs:[]
      }
    },
    onLoad(option) {
      console.log(option.id)
      this.load(option.id);
    },
    mounted() {
      
    },
    methods: {
      load:function(id) {
        var that = this;
        getCarInfo({requestPath:id}).then(response => {
          var _data = response[1].data;
          console.log(_data)
          if(_data.status == 200) {
            that.data = _data.data;
            uni.setNavigationBarTitle({
              title:_data.data.plateNo
            })
            var imgs = [];
            for(let item of _data.data.img) {
              if(item.type == 5) {
                that.img1 = item.imgUrl;
              } else if(item.type == 2) {
                that.img2 = item.imgUrl;
              } else if(item.type == 8) {
                that.img3 = item.imgUrl;
              }
              imgs[item.type] = item.imgUrl;
            }
            that.imgs = imgs;
            that.updateShowImgs(imgs);
          }else {
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
          }
        }).catch(error => {
          uni.showToast({
            icon:'error',
            title:'发生错误'
          })
        })
      },
      updateShowImgs:function (imgs) {
        var tmp = [5,2,8];
        var show = [];
        for(let img of tmp) {
          if(imgs[img] != null) {
            show.push(imgs[img]);
          }
        }
        this.showImgs = show;
      },
      test(key) {
        if(key == null) {
          return true;
        }
      },
      chooseImg:function(type) {
        var that = this;
        uni.chooseImage({
          count:1,
          sourceType:['camera'],
          success(res) {
            // console.log(res.tempFilePaths[0])
            uploadImg(res.tempFilePaths[0],type,that.data.id).then(response => {
              var _data = JSON.parse(response[1].data)
              if(_data.status == 200) {
                if(type == 5) {
                  that.img1 = _data.data;
                }else if(type == 2) {
                  that.img2 = _data.data;
                }else {
                  that.img3 = _data.data;
                }
                that.imgs[type] = _data.data;
                uni.showToast({
                  title:'上传成功'
                })
                that.updateShowImgs(that.imgs);
              }else {
                uni.showToast({
                  icon:'error',
                  title:'上传失败'
                })
              }
            })
            
          }
        })
      },
      showImg:function(url) {
        var that = this;
        uni.previewImage({
          current:url,
          urls:that.showImgs,
          fail(err) {
            console.log(err)
          }
        })
      },
      gotoBasicInfo:function() {
        var that = this.data;
        var data = {
          frontPhoto:this.img1,
          plateNo:that.plateNo,
          createTime:that.createTime,
          vehicleType:that.vehicleType,
          owner:that.owner,
          address:that.address,
          useCharacter:that.useCharacter,
          model:that.model,
          vin:that.vin,
          engineNo:that.engineNo,
          registerDate:that.registerDate,
          issueDate:that.issueDate,
        };
        var obj = encodeURIComponent(JSON.stringify(data));
        console.log(data);
        uni.navigateTo({
          url:'/pages/truck/truck/truck_basic_info?obj=' + obj
        })
      },
      showMoreImg:function() {
        var imgs = this.imgs;
        var data = {
          id:this.data.id,
          imgs:imgs
        }
        var obj = encodeURIComponent(JSON.stringify(data));
        uni.navigateTo({
          url:'/pages/truck/truck/all_truck_img?obj=' + obj
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .truck {
    height: 100%;
    padding: 16rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    padding: 18rpx 16rpx;
    .truck-first {
      display: flex;
      justify-content: space-between;
      .truck-first-item {
        width: 190rpx;
        height: 190rpx;
        overflow: hidden;
        border-radius: 12rpx;
        .truck-img {
          width: 190rpx;
          height: 190rpx;
        }
        .truck-img-title {
          width: 100%;
          height: 58rpx;
          position: relative;
          top: -64rpx;
        }
      }
    }
    .truck-second {
      padding: 0 14rpx 22rpx 20rpx;
      border-radius: 12rpx;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      background-color: white;
      margin-top: 18rpx;
      .truck-second-item {
        padding-top: 18rpx;
        height: 44rpx;
        line-height: 44rpx;
        font-size: 32rpx;
        color: rgba(51, 51, 51, 1);
      }
      .truck-second-item-2 {
        padding-top: 18rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 24rpx;
        color: rgba(51, 51, 51, 1);
        padding-right: 14rpx;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .truck-third {
      border-radius: 20rpx;
      box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
      background-color: white;
      height: 552rpx;
      margin-top: 18rpx;
      .truck-third-title {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        letter-spacing: 40rpx;
        padding: 26rpx 0 38rpx 20rpx;
        height: 44rpx;
        line-height: 44rpx;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        background-color: rgba(246, 247, 248, 1);
      }
      .truck-third-main {
        padding: 24rpx 20rpx;
      }
    }
    .truck-btn {
      background-color: rgba(250, 140, 22, 1);
      color: white;
      height: 94rpx;
      line-height: 94rpx;
      font-size: 36rpx;
      border-radius: 16rpx;
      text-align: center;
      margin-top: 52rpx;
    }
  }
</style>
